<template>
  <div class="dive1">
    <div class="divs1">
      <el-row>
        <el-col :span="8">
          <el-card class="e-card">
            <p class="cp1">日活量</p>
            <p class="cp2">{{ activityLevelTotal.dayActivityLevel }}</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="e-card">
            <p class="cp1">周活量</p>
            <p class="cp2">{{ activityLevelTotal.weeklyActivity }}</p>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="e-card">
            <p class="cp1">月活量</p>
            <p class="cp2">{{ activityLevelTotal.monthlyActivity }}</p>
          </el-card>
        </el-col>
        <!-- <el-col :span="6">
          <el-card class="e-card">
            <p class="cp1">   </p>
            <p class="cp2"></p>
          </el-card>
        </el-col> -->
      </el-row>
    </div>
    <div class="divz1">
      <div class="divz1-1" id="mains"></div>
    </div>
    <div class="divz2">
      <el-card class="divz2-1">
          <el-tabs v-model="activeName" type="border-card" style="height: 40px;">
             <el-tab-pane label="关卡排行榜" name="first" >
              <!-- <el-card > -->
                <el-table
                  :data="tableData"
                  height="320px"
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="名次"
                    style="width: 180px;">
                  </el-table-column>
                  <el-table-column
                    prop="userName"
                    label="昵称">
                  </el-table-column>
                  <el-table-column label="头像" align="center">
                    <template slot-scope="scope">
                      <!-- 图片回显 -->
                      <el-image
                        style="width: 30px; height: 30px"
                        :src="scope.row.userAvatar">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="levelId"
                    label="关卡数">
                  </el-table-column>
                </el-table>
              <!-- </el-card > -->
             </el-tab-pane>
              <el-tab-pane label="积分排行榜" name="second">
                <!-- <el-card style="height: 340px;"> -->
                <el-table
                  :data="tableData2"
                  height="320px"
                  style="width: 100%">
                  <el-table-column
                    type="index"
                    label="名次">
                  </el-table-column>
                  <el-table-column
                    prop="userName"
                    label="昵称">
                  </el-table-column>
                  <el-table-column label="头像" align="center">
                    <template slot-scope="scope">
                      <!-- 图片回显 -->
                      <el-image
                        style="width: 30px; height: 30px"
                        :src="scope.row.userAvatar">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column
                    prop="currentPlayerScore"
                    label="积分数">
                  </el-table-column>
                </el-table>
              <!-- </el-card > -->
              </el-tab-pane>
          </el-tabs>
      </el-card>
      <div class="divz2-2"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    data() {
     return {
      // 天数
      totalDays: [],
      // 日活跃量
      dailyActivity: [],
      activeName: 'first',
      // 关卡排行榜数据
      tableData: [],
      // 积分排行榜数据
      tableData2: [],
      // 活跃量具体统计数据（日 周 月）
      activityLevelTotal: {}
     }
     },
     created() {
      // 关卡排行榜
      this.playerlevel()
      // 积分排行榜
      this.playerscore()
      // 活跃量统计
      this.activityStatistics()
      // 活跃量具体统计（日 周 月）
      this.activityLeveTotal()
     },
     methods: {
      // 活跃量具体统计（日 周 月）
      activityLeveTotal () {
        this.$axios.get("/PlayerLoginLogs/getPlayerLoginLogs").then((res) => {
          this.activityLevelTotal = res.data.data.data
        })
      },
      // 活跃量数据查询
      activityStatistics () {
        this.$axios.get("/PlayerLoginLogs/selectPlayerLoginLogs").then((res) => {
          this.totalDays = res.data.data.data[0]
          this.dailyActivity = res.data.data.data[1]
          this.initCharts();
        })  
        this.loading = false;
      },
      // 活跃量echarts图
      initCharts () {
        var chartDom = document.getElementById("mains");
        var myChart = echarts.init(chartDom);
        // 获取当前月份
        var currentDate = new Date();
        var currentMonth = currentDate.getMonth() + 1;  // 因为月份从 0 开始计数，所以需要加 1
        var option = {
        tooltip: {},
        title: {
          text: "",
        },
        xAxis: {
          name: "",
          type: "category",
          data: this.totalDays,
        },
        yAxis: {
          name: currentMonth + "月活跃量",
          type: "value",
        },
        series: [
          {
            name: "本月活跃量",
            type: "line",
            data: this.dailyActivity.map((item) => ({
              value: item,
              itemStyle: {
                color: "#3F87FF",
              },
            })),
          },
        ],
      };
        option && myChart.setOption(option);
      },
      // 关卡排行榜查询
      playerlevel () {
        this.$axios.get("/Backend_Homepage/Level_Ranking").then((res) => {
          this.tableData = res.data.data
        })
      },
      // 积分排行榜查询
      playerscore () {
        this.$axios.get("/Backend_Homepage/Score_ranking").then((res) => {
          this.tableData2 = res.data.data
        })
      }
     }
}
</script>

<style>
.divs1{
  width: 100%;
  height: 100px;
}
.divz1{
  width: 100%;
  height: 400px;
  margin-top: 30px;
}
.divz1-1{
  width: 100%;
  height: 100%;
}
.divz2{
  width: 100%;
  height: 400px;
  margin-top: 10px;
}
.divz2-1{
  float: left;
  width: 50%;
  height: 400px;
}
.divz2-2{
  float: left;
  width: 50%;
  height: 400px;
}
.cp1 {
  font-size: 20px;
  line-height: 40px;
}
.cp2 {
  font-size: 24px;
  line-height: 40px;
}
.e-card {
  width: 95%;
  margin: 0 auto;
}
</style>